<!--
 * @页面名称:界面显示字段
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="form-tab1">
    <!-- 按钮组 -->
    <div class="button-group">
      <el-row class="search-row">
        <el-col :span="6" class="input-search">
          <el-input placeholder="请输入关键字查询" v-model="searchString" @change="onSearchChange"></el-input>
        </el-col>
        <div>
          <el-tooltip class="box-item" placement="bottom-end">
            <template #content>
              <span>数据表导入</span>
            </template>
            <el-button :icon="DocumentCopy" @click="importBase" :disabled="BtnStatus[4]"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" placement="bottom-end">
            <template #content>
              <span>添加界面</span>
            </template>
            <el-button :disabled="BtnStatus[0]" :icon="FolderAdd" @click="add"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" placement="bottom-end">
            <template #content>
              <span>修改界面</span>
            </template>
            <el-button :disabled="BtnStatus[1]" :icon="Edit" @click="edit"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" placement="bottom-end">
            <template #content>
              <span>删除字段</span>
            </template>
            <el-button :disabled="BtnStatus[2]" :icon="Delete" @click="del"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" placement="bottom-end">
            <template #content>
              <span>批量删除</span>
            </template>
            <el-button :disabled="BtnStatus[3]" :icon="DeleteFilled" @click="allDel"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" placement="bottom-end">
            <template #content>
              <span>重置顺序号</span>
            </template>
            <el-button :disabled="BtnStatus[4]" :icon="Female" @click="resetOrder"></el-button>
          </el-tooltip>

          <el-tooltip class="box-item" placement="bottom-end">
            <template #content>
              <span>上移</span>
            </template>
            <el-button :disabled="BtnStatus[5]" :icon="Top" @click="sortUpParam(tableIndex)"></el-button>
          </el-tooltip>

          <el-tooltip class="box-item" placement="bottom-end">
            <template #content>
              <span>下移</span>
            </template>
            <el-button :disabled="BtnStatus[6]" :icon="Bottom" @click="sortDownParam(tableIndex)"></el-button>
          </el-tooltip>
        </div>
      </el-row>
    </div>
    <!-- 表格模块 -->
    <stable
      ref="tab1Table"
      style="height: 100%"
      :columns="tableSetting.columns"
      :data="tableSetting.data"
      @rowClick="rowClick"
      @selectionChange="selection"
    ></stable>
    <!-- 新增修改弹出框 -->
    <el-dialog v-model="dialogSetting.visible" :title="dialogSetting.title" width="50%" draggable>
      <el-form label-width="100px" :model="formData" :rules="rules" ref="formRef">
        <el-form-item label="顺序号:" prop="DDM_Order">
          <el-input v-model="formData.DDM_Order"></el-input>
        </el-form-item>
        <el-form-item label="数据表字段:" prop="Field_Name">
          <el-select v-model="formData.Field_Name" filterable>
            <el-option
              v-for="item in column"
              :key="item.TableId"
              :label="item.ColumnDescription + '(' + item.DbColumnName + ')'"
              :value="item.DbColumnName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="中文名称:" prop="DDM_CNName">
          <el-input v-model="formData.DDM_CNName"></el-input>
        </el-form-item>
        <el-form-item label="显示长度:" prop="DDM_DisplayWidth">
          <el-input v-model="formData.DDM_DisplayWidth"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label-width="130px" label="内容元数据:" prop="DDM_Enable_IsMetadata_Content">
              <el-checkbox v-model="formData.DDM_Enable_IsMetadata_Content"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="130px" label="背景元数据:" prop="DDM_Enable_IsMetadata_Contextual">
              <el-checkbox v-model="formData.DDM_Enable_IsMetadata_Contextual"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label-width="130px" label="收集是否显示:" prop="DDM_Enable_Display_Collect">
              <el-checkbox v-model="formData.DDM_Enable_Display_Collect"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="130px" label="整理是否显示:" prop="DDM_Enable_Display_Arrangement">
              <el-checkbox v-model="formData.DDM_Enable_Display_Arrangement"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label-width="130px" label="保存是否显示:" prop="DDM_Enable_Display_Storage">
              <el-checkbox v-model="formData.DDM_Enable_Display_Storage"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="130px" label="利用是否显示:" prop="DDM_Enable_Display_Utilization">
              <el-checkbox v-model="formData.DDM_Enable_Display_Utilization"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label-width="130px" label="收集是否可搜索:" prop="DDM_Enable_Query_Collect">
              <el-checkbox v-model="formData.DDM_Enable_Query_Collect"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="130px" label="整理是否可搜索:" prop="DDM_Enable_Query_Arrangement">
              <el-checkbox v-model="formData.DDM_Enable_Query_Arrangement"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label-width="130px" label="保存是否可搜索:" prop="DDM_Enable_Query_Storage">
              <el-checkbox v-model="formData.DDM_Enable_Query_Storage"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="130px" label="利用是否可搜索:" prop="DDM_Enable_Query_Utilization">
              <el-checkbox v-model="formData.DDM_Enable_Query_Utilization"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label-width="130px" label="指定专用字段名:" prop="DDM_Eligible_DisplayFieldName">
          <el-input v-model="formData.DDM_Eligible_DisplayFieldName"></el-input>
        </el-form-item>
        <el-form-item label-width="130px" label="指定专用字段值:" prop="DDM_Eligible_DisplayFieldValue">
          <el-input v-model="formData.DDM_Eligible_DisplayFieldValue"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting.visible = false">取消</el-button>
          <el-button type="primary" @click="handle"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx">
import { reactive, ref, nextTick, watch } from "vue";
import { FolderAdd, Edit, Delete, DocumentCopy, DeleteFilled, Female, Top, Bottom } from "@element-plus/icons-vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import type { FormInstance, FormRules } from "element-plus";
import cloneDeep from "lodash/cloneDeep";
/**
 * @description 当前选中字段行的索引
 * @param
 * @param
 * @returns
 */
const tableIndex = ref(0);
const tab1Table = ref();
const { proxy } = useCurrentInstance();
// 按钮状态
const BtnStatus = ref([true, true, true, true, true, true, true]);
// 搜索字段
const searchString = ref("");
// 表格配置
const tableSetting = reactive({
  columns: [
    { type: "checkbox", width: 50 },
    { title: "序号", field: "DDM_Order", width: 90, sortable: true },
    { title: "数据表字段", field: "Field_Name", width: 120, sortable: true },
    { title: "显示字段名", field: "DDM_CNName", width: 120, sortable: true },
    { title: "显示长度", field: "DDM_DisplayWidth", width: 120, sortable: true },
    {
      title: "内容元数据",
      field: "DDM_Enable_IsMetadata_Content",
      width: 120,
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-checkbox disabled v-model={row.DDM_Enable_IsMetadata_Content} />];
        }
      }
    },
    {
      title: "背景元数据",
      field: "DDM_Enable_IsMetadata_Contextual",
      width: 120,
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-checkbox disabled v-model={row.DDM_Enable_IsMetadata_Contextual} />];
        }
      }
    },
    { title: "指定专用字段名", field: "DDM_Eligible_DisplayFieldName", width: 150, sortable: true },
    { title: "指定专用字段值", field: "DDM_Eligible_DisplayFieldValue", width: 150, sortable: true },
    {
      title: "收集是否显示",
      field: "DDM_Enable_Display_Collect",
      width: 150,
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-checkbox disabled v-model={row.DDM_Enable_Display_Collect} />];
        }
      }
    },
    {
      title: "整理是否显示",
      field: "DDM_Enable_Display_Arrangement",
      width: 150,
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-checkbox disabled v-model={row.DDM_Enable_Display_Arrangement} />];
        }
      }
    },
    {
      title: "保存是否显示",
      field: "DDM_Enable_Display_Storage",
      width: 150,
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-checkbox disabled v-model={row.DDM_Enable_Display_Storage} />];
        }
      }
    },
    {
      title: "利用是否显示",
      field: "DDM_Enable_Display_Utilization",
      width: 150,
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-checkbox disabled v-model={row.DDM_Enable_Display_Utilization} />];
        }
      }
    },
    {
      title: "收集是否可搜索",
      field: "DDM_Enable_Query_Collect",
      width: 150,
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-checkbox disabled v-model={row.DDM_Enable_Query_Collect} />];
        }
      }
    },
    {
      title: "整理是否可搜索",
      field: "DDM_Enable_Query_Arrangement",
      width: 150,
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-checkbox disabled v-model={row.DDM_Enable_Query_Arrangement} />];
        }
      }
    },
    {
      title: "保存是否可搜索",
      field: "DDM_Enable_Query_Storage",
      width: 150,
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-checkbox disabled v-model={row.DDM_Enable_Query_Storage} />];
        }
      }
    },
    {
      title: "利用是否可搜索",
      field: "DDM_Enable_Query_Utilization",
      width: 150,
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-checkbox disabled v-model={row.DDM_Enable_Query_Utilization} />];
        }
      }
    }
  ],
  data: [] as any[],
  sourthTableData: [] as any[], //源数据
  selectData: [] as any[]
});
// 表格单击保存对象
const rowClickObj = ref();
// 父级主表点击保存对象
const tabClickFromParent = ref();
// 弹出框配置
const dialogSetting = reactive({
  visible: false,
  title: ""
});
// 表单配置
const formData = ref({
  DDM_Order: 1,
  Field_Name: "",
  DDM_CNName: "",
  DDM_DisplayWidth: 90,
  DDM_Enable_IsMetadata_Content: false,
  DDM_Enable_IsMetadata_Contextual: false,
  DDM_Eligible_DisplayFieldName: "",
  DDM_Eligible_DisplayFieldValue: "",
  DDM_Enable_Display_Arrangement: false,
  DDM_Enable_Display_Collect: false,
  DDM_Enable_Display_Storage: false,
  DDM_Enable_Display_Utilization: false,
  DDM_Enable_Query_Arrangement: false,
  DDM_Enable_Query_Collect: false,
  DDM_Enable_Query_Storage: false,
  DDM_Enable_Query_Utilization: false
});
// 表单规则
const rules = reactive<FormRules>({
  DDM_CNName: [{ required: true, message: "请输入中文名称!", trigger: "blur" }],
  Field_Name: [{ required: true, message: "请选择数据表字段!", trigger: "blur" }]
});
// 获取表单实例
const formRef = ref<FormInstance>();
// 数据表字段保存
const column = ref<any>([]);
// 获取表格数据
const getTableData = (record: any) => {
  if (!record) {
    return;
  }
  tabClickFromParent.value = record;
  proxy.$vueAxios
    .post("Master_Base_Data_Disp_Mstr/GetConditional", {
      order: "DDM_Order asc",
      dtoList: [{ fieldName: "FMT_ID", fieldValue: record.FMT_ID }]
    })
    .then((res: any) => {
      tableSetting.data = res.List;
      tableSetting.sourthTableData = res.List; // 保留源数据作为搜索用
      tableSetting.data.sort((a: any, b: any) => a.DDM_Order - b.DDM_Order);
      BtnStatus.value[0] = false;
      if (tableSetting.data.length > 0) {
        BtnStatus.value[4] = true;
      } else {
        BtnStatus.value[4] = false;
      }
    });
  getColumn();
};
// 获取数据表字段
const getColumn = () => {
  proxy.$vueAxios
    .get("Table/column/get", { tableName: tabClickFromParent.value.FMT_TableName }, { noLoading: true })
    .then((res: any) => {
      column.value = res.List;
    });
};

// 数据表导入
const importBase = () => {
  proxy.$messageBox
    .confirm("确定要从数据表导入吗", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      const addParam = [] as any;
      column.value.forEach((item: any, index: number) => {
        const tempObj = {
          ddM_ID: proxy.$global.createID(),
          fmT_ID: tabClickFromParent.value.FMT_ID,
          field_Name: item.DbColumnName,
          ddM_CNName: item.ColumnDescription === null ? "" : item.ColumnDescription,
          ddM_DisplayWidth: 90,
          ddM_Enable_IsMetadata: false,
          ddM_Enable_Display_Collect: false,
          ddM_Enable_Display_Arrangement: false,
          ddM_Enable_Display_Storage: false,
          ddM_Enable_Display_Utilization: false,
          ddM_Enable_Query_Collect: false,
          ddM_Enable_Query_Arrangement: false,
          ddM_Enable_Query_Storage: false,
          ddM_Enable_Query_Utilization: false,
          ddM_Eligible_DisplayFieldName: "",
          ddM_Eligible_DisplayFieldValue: "",
          ddM_Enable_IsNullable: false,
          ddM_Order: index
        };
        addParam.push(tempObj);
      });
      proxy.$vueAxios.post("Master_Base_Data_Disp_Mstr/AddList", addParam).then((res: any) => {
        if (res.Mark) {
          proxy.$message.success("导入成功");
          getTableData(tabClickFromParent.value);
        } else {
          proxy.$message.error("导入失败");
        }
      });
    })
    .catch(err => {
      proxy.$message("取消导入");
    });
};
// 表格单击
const rowClick = ({ row, rowIndex }: any) => {
  tableIndex.value = rowIndex;
  rowClickObj.value = row;
  BtnStatus.value[1] = false;
  BtnStatus.value[2] = false;
  // BtnStatus.value[4] = false;
  if (rowIndex === 0) {
    // 禁用上移按钮
    BtnStatus.value[5] = true;
  } else {
    BtnStatus.value[5] = false;
  }
  if (rowIndex === tableSetting.data.length - 1) {
    // 禁用上移按钮
    BtnStatus.value[6] = true;
  } else {
    BtnStatus.value[6] = false;
  }
  tab1Table.value.setCheckboxRow([row], true);
  selection([row]);
};
// 勾选事件
const selection = (val: any[]) => {
  tableSetting.selectData = val;
  if (val.length > 0) {
    BtnStatus.value[3] = false;
    BtnStatus.value[4] = false;
  } else {
    BtnStatus.value[3] = true;
    BtnStatus.value[4] = true;
  }
};
// 新增
const add = () => {
  dialogSetting.visible = true;
  dialogSetting.title = "新增";
  formRef.value?.resetFields();
};
// 修改
const edit = () => {
  dialogSetting.visible = true;
  dialogSetting.title = "修改";
  nextTick(() => {
    formData.value = Object.assign({}, rowClickObj.value);
  });
};
// 删除
const del = () => {
  proxy.$messageBox
    .confirm("确定删除该数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios.post("Master_Base_Data_Disp_Mstr/Delete", [rowClickObj.value.DDM_ID]).then((res: any) => {
        if (res.Mark) {
          tableSetting.data = tableSetting.data.filter(
            (v: any) => v !== tableSetting.data.find((v: any) => v.DDM_ID === rowClickObj.value.DDM_ID)
          );
          proxy.$message.success("删除成功");
        } else {
          proxy.$message.error("删除失败");
        }
      });
    })
    .catch(err => {
      console.log(err);
      proxy.$message("取消删除");
    });
};
// 批量删除
const allDel = () => {
  proxy.$messageBox
    .confirm("确定删除该数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios
        .post("Master_Base_Data_Disp_Mstr/DeleteByColumnName", {
          columnName: "DDM_ID",
          ids: tableSetting.selectData.map((v: any) => v.DDM_ID)
        })
        .then((res: any) => {
          if (res.Mark) {
            // tableSetting.data = tableSetting.data.filter(
            //   (v: any) => v !== tableSetting.data.find((v: any) => v.DDM_ID === rowClickObj.value.DDM_ID)
            // );
            getTableData(tabClickFromParent.value);
            proxy.$message.success("删除成功");
          } else {
            proxy.$message.error("删除失败");
          }
        });
    })
    .catch(err => {
      console.log(err);
      proxy.$message("取消删除");
    });
};
// 重置顺序
const resetOrder = async () => {
  // 重置字段显示的顺序号
  // 重置本地表格数据字段顺序

  const newArray = [...tableSetting.selectData];
  for (let i = 0; i <= newArray.length - 1; i++) {
    proxy.$showLoading({ tip: `正在修改第${i}条数据...` });
    if (newArray[i].DDM_Order !== i + 1) {
      newArray[i].DDM_Order = i + 1;
    }
    await proxy.$vueAxios.put("Master_Base_Data_Disp_Mstr", { ...newArray[i] }, { noLoading: true }).then(() => {});
  }
  proxy.$hideLoading();
  getTableData(tabClickFromParent.value);
};
// 上移
const sortUpParam = async (index: number) => {
  if (index === 0) {
    alert("第一条不可上移");
    return;
  }
  const newData = cloneDeep(tableSetting.data);
  let temp = newData[index - 1];
  let tempOrder = newData[index - 1].DDM_Order;
  newData[index - 1].DDM_Order = newData[index].DDM_Order;
  newData[index].DDM_Order = tempOrder;
  newData.splice(index - 1, 1);
  newData.splice(index, 0, temp);
  await proxy.$vueAxios.put("Master_Base_Data_Disp_Mstr", { ...newData[index - 1] }, { noLoading: true });
  await proxy.$vueAxios.put("Master_Base_Data_Disp_Mstr", { ...newData[index] }, { noLoading: true });
  tableSetting.data = newData;
  if (tableIndex.value > 0) {
    tableIndex.value -= 1;
  }
};

// 下移
const sortDownParam = async (index: number) => {
  if (index + 1 === tableSetting.data.length) {
    alert("已经是最后一条，不可下移");
  } else {
    const newData = cloneDeep(tableSetting.data);
    const temp = newData[index + 1];
    const tempOrder = newData[index + 1].DDM_Order;
    newData[index + 1].DDM_Order = newData[index].DDM_Order;
    newData[index].DDM_Order = tempOrder;
    newData.splice(index + 1, 1);
    newData.splice(index, 0, temp);
    await proxy.$vueAxios.put("Master_Base_Data_Disp_Mstr", { ...tableSetting.data[index] }, { noLoading: true });
    await proxy.$vueAxios.put("Master_Base_Data_Disp_Mstr", { ...tableSetting.data[index + 1] }, { noLoading: true });
    tableSetting.data = newData;
    if (tableIndex.value < tableSetting.data.length - 1) {
      tableIndex.value += 1;
    }
  }
};
// 搜索事件
const onSearchChange = () => {
  const filterData = tableSetting.sourthTableData.filter(
    data =>
      data.DDM_CNName.toLowerCase().includes(searchString.value.toLowerCase()) ||
      data.Field_Name.toLowerCase().includes(searchString.value.toLowerCase())
  );
  tableSetting.data = filterData;
};
// 弹出框确认事件
const handle = () => {
  formRef.value!.validate((isValid: boolean) => {
    if (isValid) {
      if (dialogSetting.title === "新增") {
        const param = {
          ddM_ID: proxy.$global.createID(),
          fmT_ID: tabClickFromParent.value.FMT_ID,
          field_Name: formData.value.Field_Name,
          ddM_CNName: formData.value.DDM_CNName,
          ddM_Enable_Display_Collect: formData.value.DDM_Enable_Display_Collect,
          ddM_Enable_Display_Arrangement: formData.value.DDM_Enable_Display_Arrangement,
          ddM_Enable_Display_Storage: formData.value.DDM_Enable_Display_Storage,
          ddM_Enable_Display_Utilization: formData.value.DDM_Enable_Display_Utilization,
          ddM_Enable_Query_Collect: formData.value.DDM_Enable_Query_Collect,
          ddM_Enable_Query_Arrangement: formData.value.DDM_Enable_Query_Arrangement,
          ddM_Enable_Query_Storage: formData.value.DDM_Enable_Query_Storage,
          ddM_Enable_Query_Utilization: formData.value.DDM_Enable_Query_Utilization,
          ddM_Enable_IsMetadata_Content: formData.value.DDM_Enable_IsMetadata_Content,
          ddM_Enable_IsMetadata_Contextual: formData.value.DDM_Enable_IsMetadata_Contextual,
          ddM_DisplayWidth: formData.value.DDM_DisplayWidth,
          ddM_Eligible_DisplayFieldName: formData.value.DDM_Eligible_DisplayFieldName,
          ddM_Eligible_DisplayFieldValue: formData.value.DDM_Eligible_DisplayFieldValue,
          ddM_Order: formData.value.DDM_Order
        };
        proxy.$vueAxios.post("Master_Base_Data_Disp_Mstr", param).then((res: any) => {
          dialogSetting.visible = false;
          // nextTick(() => {
          //   tableSetting.data.push(param);
          // });
          getTableData(tabClickFromParent.value);
        });
      } else {
        const param = {
          ddM_ID: rowClickObj.value.DDM_ID,
          fmT_ID: rowClickObj.value.FMT_ID,
          field_Name: formData.value.Field_Name,
          ddM_CNName: formData.value.DDM_CNName,
          ddM_Enable_Display_Collect: formData.value.DDM_Enable_Display_Collect,
          ddM_Enable_Display_Arrangement: formData.value.DDM_Enable_Display_Arrangement,
          ddM_Enable_Display_Storage: formData.value.DDM_Enable_Display_Storage,
          ddM_Enable_Display_Utilization: formData.value.DDM_Enable_Display_Utilization,
          ddM_Enable_Query_Collect: formData.value.DDM_Enable_Query_Collect,
          ddM_Enable_Query_Arrangement: formData.value.DDM_Enable_Query_Arrangement,
          ddM_Enable_Query_Storage: formData.value.DDM_Enable_Query_Storage,
          ddM_Enable_Query_Utilization: formData.value.DDM_Enable_Query_Utilization,
          ddM_Enable_IsMetadata_Content: formData.value.DDM_Enable_IsMetadata_Content,
          ddM_Enable_IsMetadata_Contextual: formData.value.DDM_Enable_IsMetadata_Contextual,
          ddM_DisplayWidth: formData.value.DDM_DisplayWidth,
          ddM_Eligible_DisplayFieldName: formData.value.DDM_Eligible_DisplayFieldName,
          ddM_Eligible_DisplayFieldValue: formData.value.DDM_Eligible_DisplayFieldValue,
          ddM_Order: formData.value.DDM_Order
        };
        proxy.$vueAxios.put("Master_Base_Data_Disp_Mstr", param).then(() => {
          dialogSetting.visible = false;
          // const index = tableSetting.data.findIndex(
          //   (v: any) => v.DDM_ID === tableSetting.data.find((v: any) => v.DDM_ID === rowClickObj.value.DDM_ID).DDM_ID
          // );
          // tableSetting.data[index] = param;

          getTableData(tabClickFromParent.value);
        });
      }
    }
  });
};
watch(
  () => [...tableSetting.data],
  (newValue, oldValue) => {
    if (tab1Table.value && tab1Table.value !== "undefined") {
      tab1Table.value.reloadData(newValue);
    }
  }
);
// 将getTableData函数暴露给父组件
defineExpose({ getTableData });
</script>

<style scoped lang="scss">
.form-tab1 {
  height: calc(100% - 40px);
  .button-group {
    margin: 0 0 10px;
    .search-row {
      display: flex;
      .input-search {
        margin-right: 10px;
      }
    }
  }
}
</style>
